import * as React from "react";
import { useState } from "react";
import {
  Node,
  Editor,
  EditorKit,
  Plugin,
  BoldPlugin,
  ItalicPlugin,
  InlineCodePlugin,
  LinkPlugin,
  OrderedListPlugin,
  UnorderedListPlugin,
  BlockquotePlugin,
  H1Plugin,
  H2Plugin,
  H3Plugin,
  CodePlugin,
} from "@mpkelly/react-editor-kit";

const plugins: Plugin[] = [
  BoldPlugin,
  ItalicPlugin,
  InlineCodePlugin,
  LinkPlugin,
  OrderedListPlugin,
  UnorderedListPlugin,
  BlockquotePlugin,
  H1Plugin,
  H2Plugin,
  H3Plugin,
  CodePlugin,
];

const editorStyle = {
  width: "100%",
  height: "100%",
  overflow: "auto",
};

const initialValue: Node[] = [];

export const KitchenSinkEditor = ({
  value,
  onChange,
}: {
  value?: Node[];
  onChange?: (value: Node[]) => void;
}) => {
  const initialNodes = initialValue;

  const [editorValue, setEditorValue] = useState<Node[]>(value || initialNodes);

  const handleChange = (value: Node[]) => {
    setEditorValue(value);
    onChange?.(value);
  };

  return (
    <EditorKit plugins={plugins}>
      <Editor
        value={editorValue}
        onChange={handleChange}
        style={editorStyle}
        placeholder={"输入 Markdown 内容..."}
        autoFocus={true}
      />
    </EditorKit>
  );
};
